<template>
	<view class="container" @click="CloseTheMenu">
		<BlackMenu v-if="isOpenBlackMenu" :horizon="horizon" :floatTop="ftop" :floatHeight="fhei"
		:vertical="vertical" :isVoice="voice"></BlackMenu>
		
		<view class="background-canva"></view>
		
		<view class="inputbar" :style="'margin-top: ' + ( isOpenMenu ? '930rpx;' : '1390rpx;') ">
			<image class="inputbar-voice" src="chatImg/voice.png"></image>
			<input class="inputbar-input" />
			<image class="inputbar-emoji" src="chatImg/emoji.png"></image>
			<image class="inputbar-more" src="chatImg/more.png" id="more" @click="OpenTheMenu"></image>
		</view>
		
		<view class="extramenu" v-if="isOpenMenu">
			<view class="extramenu-box" v-for="(item,index) in extraMenu" :key="index">
				<view class="extramenu-item">
					<image class="extramenu-item-image" :src="'chatImg/more-' + (index + 1) + '.png'"></image>
				</view>
				<view class="extramenu-text">{{item}}</view>
			</view>
		</view>
		
		<view class="chatbox">
			<view class="chatbox-" v-for="(item,index) in message" :key="index">
				<view class="chatbox-time" v-if="item.src === 2">{{item.text}}</view>
				<view class="chatbox-left" v-if="item.src === 0" >
					<image class="chatbox-left-img" src="../../static/logo.png"></image>
					<view class="chatbox-left-text" @longpress="OpenBlackMenu(index,item,($event))" :id="index">
						<view v-if="item.style === 0">{{item.text}}</view>
						<view v-if="item.style === 1" style="width: 150rpx;">
							<image src="../../subpkg/chat/chatImg/voice.png" style="width: 14px;height: 14px;"></image>
							{{item.text.time}}
						</view>
					</view>
				</view>
				<view class="chatbox-right" v-if="item.src === 1">
					<image class="chatbox-right-img" src="../../static/logo.png"></image>
					<view class="chatbox-right-text" @longpress="OpenBlackMenu(index,item,($event))" :id="index">
						<view v-if="item.style === 0" style="text-align: left;">{{item.text}}</view>
						<view v-if="item.style === 1" style="width: 150rpx;">
							{{item.text.time}}
							<image src="../../subpkg/chat/chatImg/voice.png" style="width: 14px;height: 14px;transform: rotateY(180deg);"></image>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 100rpx; width: 100%;"></view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatName: '',//当前聊天页面的对象姓名
				//聊天内容 对象数组 {src:发起者 0为对面1为你2为时间节点 , text:内容(可以为任何形式) , style:格式 0为文字1为语音 }
				message: [{src : 2,text: '2023年1月14日 5:14',style: 0},
						{src : 0,text: '欧系给欧系给欧系给欧系给欧系给欧系给欧系给欧系给欧系给',style: 0},
						{src : 0,text: {sound: null,time:"15\'\'"},style: 1},
						{src : 1,text: '奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！',style: 0},
						{src : 1,text: {sound: null,time:"15\'\'"},style: 1},
						{src : 2,text: '2023年1月14日 5:14',style: 0},
								{src : 0,text: '欧系给欧系给欧系给欧系给欧系给欧系给欧系给欧系给欧系给',style: 0},
								{src : 0,text: {sound: null,time:"15\'\'"},style: 1},
								{src : 1,text: '奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！',style: 0},
								{src : 1,text: {sound: null,time:"15\'\'"},style: 1},
								{src : 2,text: '2023年1月14日 5:14',style: 0},
										{src : 0,text: '欧系给欧系给欧系给欧系给欧系给欧系给欧系给欧系给欧系给',style: 0},
										{src : 0,text: {sound: null,time:"15\'\'"},style: 1},
										{src : 1,text: '奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！',style: 0},
										{src : 1,text: {sound: null,time:"15\'\'"},style: 1},{src : 2,text: '2023年1月14日 5:14',style: 0},
						{src : 0,text: '欧系给欧系给欧系给欧系给欧系给欧系给欧系给欧系给欧系给',style: 0},
						{src : 0,text: {sound: null,time:"15\'\'"},style: 1},
						{src : 1,text: '奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！奥利安飞！',style: 0},
						{src : 1,text: {sound: null,time:"15\'\'"},style: 1},
						],
				otherImg : '',//对面图片地址
				yourImg : '',//你的图片地址
				isOpenMenu : false,//是否开启下方菜单
				extraMenu : ['相机','拍摄','语音通话','视频通话'],//下方菜单的内容
				info : null,//每个聊天内容的节点信息
				//以下为气泡菜单属性
				horizon : false,//水平参数
				vertical : false,//垂直参数
				ftop : 0,//悬浮顶部参数
				fhei : 0,//悬浮高度参数
				voice : false,//是否为语音消息
				isOpenBlackMenu : false,//是否开启气泡菜单
			};
		},
		onLoad (options){
			this.chatName = options.chatName;
			uni.setNavigationBarTitle({
				title: this.chatName,
			});
		},
		onReady() {
			const that = this;
			// select中的参数就如css选择器一样选择元素
			let notes = uni.createSelectorQuery().in(this).selectAll(".chatbox-");
			notes.boundingClientRect(function(data) { 
				// 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
				that.info = data;
				//数据导入
				console.log(that.info);
			}).exec(function(res){
				
			})
		},
		methods : {
			//打开下方菜单
			OpenTheMenu(){
				this.isOpenMenu = true;
			},
			//关闭下方菜单
			CloseTheMenu(e){
				if(e.target.id !== 'more'){
					this.isOpenMenu = false;
				}
				//关闭气泡菜单
				this.isOpenBlackMenu = false;
			},
			//长按打开气泡菜单
			OpenBlackMenu(index,item,e){
				this.isOpenBlackMenu = true;
				this.ftop = this.info[index].top;
				this.fhei = this.info[index].height;
				this.horizon = item.src == 1;
				this.vertical = e.changedTouches[0].clientY < 175;
				this.voice = item.style == 1;
				//console.log(this.ftop + " " + this.fhei + " " + this.horizon +  " " + e.changedTouches[0].clientY  + " " + this.vertical);
			},
		}
	}
</script>

<style lang="scss">
.container {

	.background-canva {
		position: fixed;
		background-color: rgba(235, 236, 237, 0.5);
		width: 100%;
		height: 1500rpx;
		z-index: -2;
	}
	
	.inputbar {
		position: fixed;
		width: 100%;
		height: 90rpx;
		background-color: rgba(222, 222, 222, 1);
		display: flex;
		z-index: 2;
		
		.inputbar-voice {
			border: 2px solid rgba(122, 122, 122, 1);
			margin-top: 20rpx;
			margin-left: 30rpx;
			padding: 5rpx;
			width: 30rpx;
			height: 30rpx;
			border-radius: 15px;
		}
		
		.inputbar-input {
			margin-top: 12rpx;
			margin-left: 20rpx;
			border: 1px solid rgba(22, 31, 61, 0.4);
			background-color: white;
			padding-left: 20rpx;
			border-radius: 15px;
			width: 490rpx;
			height: 60rpx;
		}
		
		.inputbar-emoji {
			margin-top: 23rpx;
			margin-left: 30rpx;
			width: 40rpx;
			height: 40rpx;
		}
		
		.inputbar-more {
			margin-top: 23rpx;
			margin-left: 20rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.extramenu {
		position: fixed;
		margin-top: 1000rpx;
		width: 100%;
		height: 500rpx;
		background-color: rgba(235, 236, 237, 1);
		display: flex;
		z-index: 1;
		
		.extramenu-box {
			margin-top: 40rpx;
			height: 150rpx;
			width: 25%;
			text-align: center;
			
			.extramenu-item {
				width: 100rpx;
				height: 100rpx;
				background-color: white;
				border-radius: 5px;
				align-content: center;
				margin-left: 40rpx;
				
				.extramenu-item-image {
					margin-top: 15rpx;
					width: 80rpx;
					height: 70rpx;
				}
				
			}
			
			.extramenu-text {
				margin-top : 10rpx;
				font-size: 13px;
			}
		}
	}
	
	.chatbox {
		
		.chatbox- {
			
			.chatbox-time {
				text-align: center;
				color: rgba(128, 128, 128, 0.6);
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				font-size: 12px;
				
			}
			
			.chatbox-left {
				margin-bottom: 40rpx;
				padding-left: 30rpx;
				display: flex;
				text-align: left;
				
				.chatbox-left-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40px;
				}
				
				.chatbox-left-text {
					margin-left: 20rpx;
					max-width: 500rpx;
					padding: 20rpx;
					background-color: white;
					border-radius: 7px;
					font-size: 15px;
				}
			}
			
			.chatbox-right {
				margin-bottom: 40rpx;
				display: flex;
				flex-direction: row-reverse;
				text-align: right;
				padding-right: 30rpx;
				
				.chatbox-right-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40px;
				}
				
				.chatbox-right-text {
					margin-right: 20rpx;
					max-width: 500rpx;
					padding: 20rpx;
					background-color: rgba(67, 207, 124, 1);
					border-radius: 7px;
					font-size: 15px;
				}
			}
		}
		
		
	}
}
</style>
